<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--单向绑定: (Model->View 不能View->Model)-->
    <!-- <input :value="keyword"> -->
    <!--双向绑定: (Model->View 又能View->Model)-->
    <input v-model:value="keyword">
    <button @click="doUpdate">更新</button>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            keyword: "ABC" //开局用户没有输入任何关键词
        },
        methods: {
            doUpdate() {
                console.log(`查找 ${this.keyword} 相关的内容...`)
            }
        }
    })
</script>

</body>
</html>
